<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + 'Api路由定义'">
      <el-button size="small" @click="$router.push('/sys/api-router-define/add')" v-if="$props.action=='edit'">新建
      </el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>
    <el-row :gutter="12" type="flex">
      <el-col :span="12">
        <el-card shadow="always">
          <template #header><span>基本信息</span></template>

          <kv label="匹配路径">
            <el-input v-model="info.sourcePath"/>
          </kv>
          <kv label="目标路径">
            <el-input v-model="info.targetPath"/>
          </kv>
          <kv label="匹配host">
            <el-input v-model="info.whenHost"/>
          </kv>
          <kv label="备注">
            <el-input type="textarea" v-model="info.remark"/>
          </kv>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="always">
          <template #header><span>匹配Headers</span></template>


        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2024-02-06 00:22:31
 */




//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"info": {}});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});

const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const action = $computed(function () {
  return $props.id ? "edit" : "add";
});
const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});

const loadData = async function () {
  if (!$props.id) return;
  let res = await jv.$http.post("/sys/api-router-define/detail/" + $props.id)
  $data.info = res.data.data;
};
const save_click = async function () {
//校验
  if (jv.chk_main() == false) {
    return;
  }
  let res = await jv.$http.post("/sys/api-router-define/save", $data.info)
//[axios拦截器中已处理了异常]。
  jv.info(action_name + " 成功");
  let id = res.data.data || $data.info.id;
  if (!id) {
    return jv.error("找不到 id");
  }
  jv.$router.push("/sys/api-router-define/edit/" + id);
};

onMounted(function () {
  loadData();
})


</script>

<style scoped lang="scss">
label {
  display: inline-block;
}
</style>
